<template>
  <view class="login-page">
    <!-- 自定义导航栏 -->
    <custom-navbar
      :title="'登录'"
      :background-color="'#FFFFFF'"
    ></custom-navbar>

    <view class="login-content">
      <!-- Logo -->
      <view class="logo">
        <placeholder-image
          text="人体生命科学馆"
          :width="200"
          :height="200"
          :bg-color="'#5a8dee'"
        ></placeholder-image>
      </view>

      <!-- 登录表单 -->
      <view class="login-form">
        <view class="form-item">
          <uni-icons type="person" size="20" color="#999"></uni-icons>
          <input
            class="form-input"
            type="text"
            v-model="formData.account"
            placeholder="请输入用户名"
          />
        </view>
        <view class="form-item">
          <uni-icons type="locked" size="20" color="#999"></uni-icons>
          <input
            class="form-input"
            type="password"
            v-model="formData.password"
            placeholder="请输入密码"
          />
        </view>
      </view>

      <!-- 登录按钮 -->
      <view class="login-btn" @click="handleLogin">登录</view>

      <!-- 跳转到注册页 -->
      <view class="switch-btn">
        <text>没有账号？</text>
        <text class="link" @click="goRegister">去注册</text>
      </view>

      <!-- 其他登录方式 -->
      <view class="other-login">
        <view class="divider">
          <text>其他登录方式</text>
        </view>
        <view class="login-methods">
          <view class="method-item" @click="handleWechatLogin">
            <uni-icons type="weixin" size="30" color="#07c160"></uni-icons>
          </view>
          <view class="method-item" @click="handlePhoneLogin">
            <uni-icons type="phone" size="30" color="#5a8dee"></uni-icons>
          </view>
        </view>
      </view>

      <!-- 用户协议 -->
      <view class="agreement">
        <checkbox-group @change="handleAgreementChange">
          <label class="agreement-label">
            <checkbox :checked="isAgreed" color="#5a8dee" />
            <text class="agreement-text">
              登录即代表您已同意
              <text class="link" @click="showUserAgreement">《用户协议》</text>
              和
              <text class="link" @click="showPrivacyPolicy">《隐私政策》</text>
            </text>
          </label>
        </checkbox-group>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from "vue";
import CustomNavbar from "@/components/custom-navbar/index.vue";
import { request } from "@/utils/request";

// 登录请求接口
const reqLogin = (data) => {
	return request({
	  url: "/user/login",
	  method: "post",
	  data: JSON.stringify(data)
	})
}

// 检测权限
const reqPermission = (params) => {
	return request(({
		url: "/mine/permissions",
		method: "GET",
		params: params
	}))
}

// 表单数据
const formData = ref({
  account: "",
  password: "",
});

// 是否同意协议
const isAgreed = ref(false);

// 处理登录
const handleLogin = async () => {
  if (!isAgreed.value) {
    uni.showToast({
      title: "请先同意用户协议和隐私政策",
      icon: "none",
    });
    return;
  }

  if (!formData.value.account || !formData.value.password) {
    uni.showToast({
      title: "请输入用户名和密码",
      icon: "none",
    });
    return;
  }

  // 模拟登录请求
  uni.showLoading({
    title: "登录中...",
  });
  
  const res = await reqLogin(formData.value)
  const isAdmin = await reqPermission({userId: res.data.userId})
  
  if (res.code != 200 || !isAdmin) {
	// 登录失败
	uni.showToast({
	  title: "登录失败",
	  icon: "error",
	});
	
	uni.hideLoading();
	return
  }
  
  uni.setStorageSync('isAdmin', isAdmin.isAdmin)
  // 触发全局登录事件
  uni.$emit('loginStatusChanged', { userInfo: res.data });
  uni.setStorageSync('token', res.data.token)
  uni.setStorageSync('userInfo', res.data)
  

  uni.showToast({
	title: "登录成功",
	icon: "success",
  });
  
  uni.hideLoading();

  // 返回上一页
  uni.switchTab({ url: "/pages/index/index" });
};

// 处理微信登录
const handleWechatLogin = () => {
  uni.showToast({
    title: "微信登录开发中",
    icon: "none",
  });
};

// 处理手机号登录
const handlePhoneLogin = () => {
  uni.showToast({
    title: "手机号登录开发中",
    icon: "none",
  });
};

// 处理协议勾选
const handleAgreementChange = (e) => {
  isAgreed.value = e.detail.value.length > 0;
};

// 显示用户协议
const showUserAgreement = () => {
  uni.navigateTo({
    url: "/pages/agreement/user",
  });
};

// 显示隐私政策
const showPrivacyPolicy = () => {
  uni.navigateTo({
    url: "/pages/agreement/privacy",
  });
};

// 跳转到注册页
const goRegister = () => {
  uni.navigateTo({ url: "/pages/register/index" });
};

</script>

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  background-color: $uni-bg-color-grey;
}

.login-content {
  padding: $spacer-6 $spacer-4;
}

.logo {
  display: flex;
  justify-content: center;
  margin-bottom: $spacer-8;
}

.login-form {
  background-color: $uni-bg-color;
  border-radius: $uni-border-radius-lg;
  padding: $spacer-4;
  margin-bottom: $spacer-6;
  box-shadow: $box-shadow-card;
}

.form-item {
  display: flex;
  align-items: center;
  padding: $spacer-3 0;
  border-bottom: 1px solid $uni-border-color;

  &:last-child {
    border-bottom: none;
  }
}

.form-input {
  flex: 1;
  margin-left: $spacer-3;
  font-size: $uni-font-size-base;
}

.login-btn {
  background: $gradient-primary;
  color: $uni-text-color-inverse;
  font-size: $uni-font-size-lg;
  height: 88rpx;
  border-radius: $uni-border-radius-lg;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: $spacer-6;
}

.switch-btn {
  text-align: center;
  margin-bottom: $spacer-6;
  font-size: $uni-font-size-base;
  color: $uni-text-color-grey;
}

.switch-btn .link {
  color: $uni-color-primary;
  margin-left: 8rpx;
  cursor: pointer;
}

.other-login {
  margin-bottom: $spacer-6;
}

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: $spacer-4;

  &::before,
  &::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: $uni-border-color;
  }

  text {
    padding: 0 $spacer-4;
    font-size: $uni-font-size-sm;
    color: $uni-text-color-grey;
  }
}

.login-methods {
  display: flex;
  justify-content: center;
  gap: $spacer-6;
}

.method-item {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: $uni-bg-color;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: $box-shadow-card;
}

.agreement {
  text-align: center;
}

.agreement-label {
  display: flex;
  align-items: center;
  justify-content: center;
}

.agreement-text {
  font-size: $uni-font-size-sm;
  color: $uni-text-color-grey;
  margin-left: $spacer-2;
}

.link {
  color: $uni-color-primary;
}
</style>
